<template>
  <div class="app-container">
    <el-card class="search-from">
      <el-form :inline="true" class="form-inline" v-model="searchfilter">
        <el-form-item label="关键字">
          <el-input
            placeholder="请输入关键字"
            style="width: 300px"
            ref="reffilter"
            v-model="searchfilter.filter"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search()">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="list">
      <el-button
        v-hasPerm="'Dictionary.Create'"
        :icon="Plus"
        type="primary"
        @click="addDic"
        >添加字典</el-button
      >
      <div class="list-table">
        <el-table style="width: 100%" :data="dataList">
          <el-table-column
            type="index"
            width="100"
            label="#"
            align="center"
          ></el-table-column>
          <template v-for="item in columns">
            <el-table-column
              :prop="item.prop"
              :label="item.label"
              :min-width="item.width"
              align="center"
            >
              <template v-slot="{ row }" v-if="item.prop == 'creationTime'">
                {{ moment(row.creationTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
            </el-table-column>
          </template>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-if="isInPermission('Dictionary.Update')"
                      @click="editDict(scope.row)"
                      >修改</el-dropdown-item
                    >

                    <el-dropdown-item
                      v-if="isInPermission('Dictionary.Detail.Default')"
                      @click="detailDict(scope.row)"
                      >详情</el-dropdown-item
                    >

                    <el-dropdown-item
                      v-if="isInPermission('Dictionary.Delete')"
                      @click="deleteDict(scope.row)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="paging">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="tablePage.totalResult"
          :page-size="tablePage.pageSize"
          @change="handlePageChange"
          v-model:current-page="tablePage.currentPage"
        />
      </div>
    </el-card>
    <addOrUpdateDictionary
      :dictId="currentDicId"
      v-if="addOrUpdateVisable"
      @closedialogevent="(eventData:boolean)=>{addOrUpdateVisable= eventData}"
      @refresh="pg_init()"
    />

    <dictionaryDetail
      v-if="detailVisable"
      :dictId="currentDicId"
      :dictName="currentDicName"
      @closedialogevent="(eventData:boolean)=>{detailVisable= eventData}"
    />
  </div>
</template>
<script setup lang="ts">
import addOrUpdateDictionary from "./components/addOrUpdateDictionary.vue";
import dictionaryDetail from "./components/dictionaryDetail.vue";
import moment from "moment";
import { getdictionarypagelist, deletedictionaryinfo } from "@/api/dict/index";
import { Search, Plus, ArrowDown } from "@element-plus/icons-vue";

const isInPermission = inject("isInPermission");
const searchfilter = ref<any>({
  filter: "",
});

const tablePage = ref<any>({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0,
});
const columns = [
  {
    label: "字段名称",
    prop: "name",
    width: 150,
  },
  {
    label: "备注",
    prop: "description",
    width: 150,
  },
  {
    label: "创建时间",
    prop: "creationTime",
    width: 130,
  },
];

const currentDicId = ref<String | null>(null);
const currentDicName = ref<String | null>(null);
const dataList = ref<any>();

const addOrUpdateVisable = ref<boolean>(false);
const detailVisable = ref<boolean>(false);
const addDic = () => {
  currentDicId.value = null;
  currentDicName.value = null;
  addOrUpdateVisable.value = true;
  //console.log('dialogvisable',addOrUpdateVisable.value)
};

const editDict = (row: any) => {
  currentDicId.value = row.id;
  currentDicName.value = row.name;
  addOrUpdateVisable.value = true;
};

const deleteDict = (row: any) => {
  ElMessageBox.confirm("确定删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    deletedictionaryinfo(row.id).then((res) => {
      ElNotification({
        title: "提示",
        message: "删除成功",
        type: "success",
        duration: 2000,
      });
      pg_init();
    });
  });
};
const detailDict = (row: any) => {
  currentDicId.value = row.id;
  currentDicName.value = row.name;
  detailVisable.value = true;
};

const pg_init = () => {
  const { currentPage, pageSize } = tablePage.value;

  let param = {
    filter: searchfilter.value.filter,
    SkipCount: (currentPage - 1) * pageSize,
    MaxResultCount: pageSize,
  };
  //console.log('param',param)
  getdictionarypagelist(param).then((res) => {
    dataList.value = res.items;
    tablePage.value.totalResult = res.totalCount;
  });
};

const search = () => {
  pg_init();
};

const handlePageChange = (currentPage: number, pageSize: number) => {
  tablePage.value.currentPage = currentPage;
  pg_init();
};

onMounted(() => {
  pg_init();
});
</script>
<style type="sass" scoped>
.list-table {
  width: 100%;
  height: calc(100% - 70px);
}
</style>
